<!DOCTYPE html>
<style type="text/css">
input, em { cursor: pointer; margin-right: 100px; }
label, span { cursor: pointer; background: transparent; }
</style>
<script src="../../resources/js-test.js"></script>
<div><label id="clickme1" for="checkbox"><input id="checkbox" type="checkbox">Click the empty area on the left</input></label></div>
<div><span id="clickme2"> <em id="em">Click the empty area</em><em>in middle</em></span></div>
<p id="description"></p>
<div id="console"></div>
<script>
    description('Click event should be fired when it occurs within culled inline.');
    var parent;
    var gotClick;
    function hitTest(id) {
        var element = document.getElementById(id);
        parent = element.parentElement;
        // the x, y coordinates on margin of element
        x = element.offsetLeft + element.offsetWidth  + 10;
        y = element.offsetTop + element.offsetHeight / 2;

        shouldBeEqualToString('document.elementFromPoint(x, y).id', parent.id);

        if (window.eventSender) {
            gotClick = false;
            parent.addEventListener('click', function(e) {
                debug(parent.nodeName + ' that is a parent of ' + element.nodeName + ' is clicked.');
                gotClick = true;
            });
            eventSender.mouseMoveTo(x, y);
            eventSender.mouseDown();
            eventSender.mouseUp();
            shouldBeTrue('gotClick');
        }
        debug('');
    }

    hitTest('checkbox');
    hitTest('em');

    if (window.eventSender)
        shouldBeTrue('document.getElementById("checkbox").checked');
</script>
